<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2025-04-02 18:12:09
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-04-12 16:49:36
 * @FilePath: \leeui\lee-ui-test\src\views\lee\table.vue
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import {
  reactive,
  h,
  ref
} from "vue";
import { ElButton,ElFormItem,ElInput } from "element-plus";
import { LElCom } from "@uf_lee/leeui";
import type { TableSchema } from "@uf_lee/leeui";
import { LElTable } from "@uf_lee/leeui";
// 验证规则
const rules = ref({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 2, max: 10, message: '名称长度2-10字符', trigger: 'blur' }
  ],
  // age: [
  //   { required: true, message: '请输入年龄', trigger: 'blur' },
  //   { type: 'number', min: 0, max: 150, message: '年龄需在0-150之间', trigger: 'blur' }
  // ]
  Input: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 0, max: 150, message: '年龄需在0-150之间', trigger: 'blur' }
  ]
});

const tableData = reactive([
  {
    id:1,
    date: "2016-05-03",
    name: "张三",
    address: "No. 189, Grove St, Los Angeles",
    disabled:true,
  },
  {
    id:2,
    date: "2016-05-02",
    name: "李四",
    address: "No. 189, Grove St, Los Angeles",
    disabled:false,
  },
  {
    id:3,
    date: "2016-05-04",
    name: "王五",
    address: "No. 189, Grove St, Los Angeles",
    disabled:true,
  },
  {
    id:4,
    date: "2016-05-01",
    name: "赵六",
    address: "No. 189, Grove St, Los Angeles",
    disabled:false,
  },
]);

const schema: TableSchema[] = [
  {
    field:"radio",
    type: "radio",
    width: 50,
    disabledFieldName:'disabled'
  },
  {
    field:"selection",
    type:"selection",
    selectable:(row)=>{
      return row.id !== 1;
    }
  },
  {
    field: "date",
    label: "时间",
    width: 120,
    align: "center",
    slots: {
      default: () => {
        return h("div", null, "123");
      },
    },
  },
  
  {
    field: "name",
    label: "Button",
    width: 100,
    component: "Button",
    componentProps: {
      onclick: (e: any) => {
        console.log("click", e);
      },
    },
  },
  
  {
    field: "name",
    label: "名称",
    width: 160,
    component: "Input",
  },
  {
    field: "address",
    label: "地址",
    width: 250,
  },
  {
    field: "Radio",
    label: "Radio",
    width: 200,
    component: "Radio",
    componentProps: {
      options: [
        {
          label: "单选1",
          value: "1",
        },
        {
          label: "单选2",
          value: "2",
        },
      ],
    },
  },
  {
    field: "RadioButton",
    label: "RadioButton",
    width: 180,
    // hidden: true,
    component: "RadioButton",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
  },
  {
    field: "Checkbox",
    label: "Checkbox",
    width: 200,
    component: "Checkbox",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
  },
  {
    field: "CheckboxButton",
    label: "CheckboxButton",
    width: 200,
    component: "CheckboxButton",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
  },
  {
    field: "Input",
    label: "Input",
    width: 200,
    component: "Input",
    componentProps: {
      placeholder: "输入框",
    },
  },
  {
    field: "InputNumber",
    label: "InputNumber",
    width: 200,
    component: "InputNumber",
    componentProps: {
      placeholder: "数字输入框",
    },
  },
  {
    field: "Select",
    label: "Select",
    width: 200,
    component: "Select",
    componentProps: {
      placeholder: "请选择下拉框",
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
  },
  {
    field: "Cascader",
    label: "Cascader",
    minWidth: 100,
    component: "Cascader",
    componentProps: {
      placeholder: "级联选择器",
      options: [
        {
          label: "选项1",
          value: "1",
          children: [
            {
              label: "选项1-1",
              value: "1001",
            },
            {
              label: "选项1-2",
              value: "1002",
            },
            {
              label: "选项1-3",
              value: "1003",
            },
            {
              label: "选项1-4",
              value: "1004",
            },
          ],
        },
        {
          label: "选项2",
          value: "2",
          children: [
            {
              label: "选项2-1",
              value: "2001",
            },
            {
              label: "选项2-2",
              value: "2002",
            },
            {
              label: "选项2-3",
              value: "2003",
            },
            {
              label: "选项2-4",
              value: "2004",
            },
          ],
        },
        {
          label: "选项3",
          value: "3",
          children: [
            {
              label: "选项3-1",
              value: "3001",
              children: [
                {
                  label: "选项3-1-1",
                  value: "3001001",
                },
                {
                  label: "选项3-1-1",
                  value: "3001--2",
                },
              ],
            },
            {
              label: "选项3-2",
              value: "3002",
            },
          ],
        },
        {
          label: "选项4",
          value: "4",
        },
        {
          label: "选项5",
          value: "5",
        },
      ],
    },
  },
  // {
  //   field: "Switch",
  //   label: "Switch",
  //   component: "Switch",
  //   componentProps: {},
  // },
  // {
  //   field: "Slider",
  //   label: "Slider",
  //   width: 200,
  //   component: "Slider",
  //   componentProps: {},
  // },
  // {
  //   field: "TimePicker",
  //   label: "TimePicker",
  //   width: 250,
  //   component: "TimePicker",
  //   componentProps: {
  //     placeholder: "时间选择器",
  //   },
  // },
  // {
  //   field: "DatePicker",
  //   label: "DatePicker",
  //   width: 250,
  //   component: "DatePicker",
  //   componentProps: {
  //     placeholder: "日期选择器",
  //   },
  // },
  // {
  //   field: "Rate",
  //   label: "Rate",
  //   component: "Rate",
  //   componentProps: {},
  // },
  // {
  //   field: "ColorPicker",
  //   label: "ColorPicker",
  //   component: "ColorPicker",
  //   componentProps: {},
  // },
  // {
  //   field: "Transfer",
  //   label: "Transfer",
  //   component: "Transfer",
  //   componentProps: {
  //     data: [
  //       {
  //         key: "1",
  //         label: "选项1",
  //         disabled: false,
  //       },
  //       {
  //         key: "2",
  //         label: "选项2",
  //         disabled: false,
  //       },
  //       {
  //         key: "3",
  //         label: "选项3",
  //         disabled: true,
  //       },
  //     ],
  //   },
  // },
  // {
  //   field: "Divider",
  //   label: "Divider",
  //   component: "Divider",
  //   componentProps: {
  //     contentPosition: "center",
  //   },
  // },
  // {
  //   field: "TimeSelect",
  //   label: "TimeSelect",
  //   component: "TimeSelect",
  //   componentProps: {
  //     placeholder: "时间选择",
  //   },
  // },
  // {
  //   field: "SelectV2",
  //   label: "SelectV2",
  //   component: "SelectV2",
  //   componentProps: {
  //     placeholder: "虚拟化选择器",
  //     options: [
  //       {
  //         label: "选项1",
  //         value: "1",
  //       },
  //       {
  //         label: "选项2",
  //         value: "2",
  //       },
  //     ],
  //   },
  // },
  // {
  //   field: "Mention",
  //   label: "Mention",
  //   component: "Mention",
  //   componentProps: {
  //     placeholder: "使用@来触发",
  //     options: [
  //       {
  //         label: "张三",
  //         value: "zhangsan",
  //       },
  //       {
  //         label: "李四",
  //         value: "lisi",
  //       },
  //     ],
  //   },
  // },
  // {
  //   field: "InputTag",
  //   label: "InputTag",
  //   component: "InputTag",
  //   componentProps: {
  //     placeholder: "标签输入框",
  //   },
  // },
  {
    field: "action",
    label: "操作"
  },
  {
    field: "index",
    type:"index",
    label: "No"
  },
  
];
const divider = reactive(["tableData", "LElTable"]);

const formRef = ref();

/**
 * @param ref ElForm实例
 */
const register = (ref: any) => {
  formRef.value = ref;
};

const onVerify = () => {
  // console.log("验证", formRef.value);
  if (!formRef.value) return;
  formRef.value.form.validate((valid: any, fields: any) => {
    if (valid) {
      console.log("表单验证成功");
    } else {
      console.log("表单验证失败", fields);
    }
  });
};

const onSelect = () => { 
  if (!formRef.value) return;
  console.log(formRef.value.table.getSelectionRows());
};
const rowClick = (row: any) => {
  console.log("rowClick", row);
};
const onRadio = ()=>{
  if (!formRef.value) return;
  console.log(formRef.value.getRadioValues());
}
// 处理选中值变化
// const handleSelectionChange = (selectedRows:any) => {
//   console.log("当前选中的值：", selectedRows);
//   // 单选时：selectedRows是长度为0或1的数组
//   // 多选时：selectedRows是所有选中行的数组
// };
</script>

<template>
  <LElCom
    :data="{ field: 'Divider', component: 'Divider' }"
    v-model="divider[0]"
  ></LElCom>
  {{ tableData }}
  <LElCom
    :data="{ field: 'Divider', component: 'Divider' }"
    v-model="divider[1]"
  ></LElCom>
  <LElTable 
    :data="tableData" 
    :schema="schema" 
    :is-form="true" 
    :rules="rules"
    @register="register"
    selectionType="multiple"
    :selectAll="true"
    rowKey="id"
    @row-click="rowClick"
    >
    <!-- @selection-change="handleSelectionChange" -->
    <template #action="{ row, $index }">
      <ElButton type="primary" @click="console.log(row.name, $index)"> 新增 </ElButton>
    </template>
    <!-- <template #Cascader="{ row }">
      <ElButton type="primary" @click="console.log('Cascader',row.date)"> Cascader </ElButton>
    </template> -->
    <template #Cascader="data">
      <ElButton type="primary" @click="console.log('Cascader',data)"> Cascader </ElButton>
    </template>
    <!-- <template #Input="{ row,$index }">
      <ElFormItem :prop="`${$index}.Input`" :rules="rules.Input">
        <ElInput v-model="row.Input" placeholder="输入框" />
      </ElFormItem>
    </template> -->
  </LElTable>
  <el-button type="primary" @click="onVerify()"> 验证 </el-button>
  <el-button type="primary" @click="onSelect()"> 获取多选 </el-button>
  <el-button type="primary" @click="onRadio()"> 获取单选 </el-button>
</template>
